<template>
  <!-- 生成二维码 -->
  <div id="app" :style="{ width: size + 'px' }">
    <QrcodeVue :value="value" :size="size" />
    <el-button type="primary" @click="download">保存</el-button>
  </div>
</template>

<script>
import { EventBus } from "../../utils/eventBus";
import QrcodeVue from "qrcode.vue";
export default {
  components: {
    QrcodeVue,
  },
  data() {
    return {
      value:
        "https://cdpre.tfsmy.com/frontend/foundation-c/#/foundDetail?id=45cd5f798af1c8b601da1b5c7283f92d",
      size: 300,
    };
  },
  methods: {
    download() {
      //获取canvas标签
      let canvas = document
        .getElementById("app")
        .getElementsByTagName("canvas");
      //创建a标签
      let a = document.createElement("a");
      //获取二维码的url并赋值为a.href
      a.href = canvas[0].toDataURL("img/png");
      //设置下载文件的名字
      a.download = "二维码";
      //点击事件，相当于下载
      a.click();
    },
  },
};
</script>

<style lang="less" scoped>
#app {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>